<template>
    <div class="Circle_Chart_Box" ref="box">
        <canvas ref="paper"></canvas>
    </div>
</template>
<script>
export default {
    data(){
        return{
            ctx:null,
            paper:null,
            box:null,
            timer:null,
            dtimer:null,
            downInterval:65,
            upInterval:65,
        }
    },
    props:{
        center:{
            default:function(){
                return [0.5, 0.5]
            }
        },
        radius:{
            default:function(){
                return [0.78, 0.9]
            }
        },
        percent:{
            default:0
        },
        perColor:{
            default:'#2881b8'
        },
        centerColor:{
            default:'#092b41'
        },
        ringColor:{
            default:'#c3cbc9'
        },
        textColor:{
            default:'#fff'
        }
    },
    watch:{
        percent(newval, oldval){
            if(newval!==oldval) this.drawRealtimeView(newval, oldval) 
        }
    },
    beforeDestroy(){
        if(this.dtimer) clearInterval(this.dtimer)
        if(this.timer) clearInterval(this.timer)
        this.ctx.clearRect(0, 0, this.bw, this.bh)
    },
    mounted(){
        this.initChart()
    },
    methods:{
        initChart(){
            this.paper = this.$refs.paper;
            this.box = this.$refs.box;
            this.getBoxSize()
            this.ctx = this.paper.getContext('2d')
            this.drawAnimate()
            window.addEventListener('resize',this.drawResize)
        },
        drawResize(){
            if(this.paper&&this.ctx){
                this.getBoxSize()
                this.ctx.clearRect(0, 0, this.bw, this.bh)
                let endPercent = this.percent*100
                this.drawCenterCircle()
                this.drawCircleRing()
                this.drawOutLine()
                this.drawPercentCircle(endPercent)
                this.drawPercentText(endPercent)
            }
        },
        drawRealtimeView(newPercent, oldPercent){
            // console.log( newPercent )
            let newVal = newPercent*100>=10000?10000:newPercent*100
            let currentVal = oldPercent*100>=10000?10000:oldPercent*100
            if(this.dtimer) clearInterval(this.dtimer)
            if( newVal < currentVal ) this.drawDownTrend(newVal, currentVal)
            else this.drawUpTrend(newVal, currentVal)
        },
        drawDownTrend(newPercent, oldPercent){
            let self = this
            this.trendStatus = 'down'

            this.dtimer = setInterval(()=>{
                if(newPercent>=oldPercent) clearInterval(this.dtimer)
                self.ctx.clearRect(0, 0, this.bw, this.bh)

                oldPercent-=this.downInterval;

                if(newPercent>=oldPercent) oldPercent = newPercent;

                this.drawCommonView(oldPercent)
            },10)
        },
        drawUpTrend(newPercent, oldPercent){
            let self = this
            this.trendStatus = 'up'

            this.dtimer = setInterval(()=>{
                if(newPercent<=oldPercent) clearInterval(this.dtimer)
                self.ctx.clearRect(0, 0, this.bw, this.bh)

                oldPercent+=this.upInterval;

                if(newPercent<=oldPercent) oldPercent = newPercent;

                if(oldPercent<=10000) this.drawCommonView(oldPercent)
                else this.drawCommonView(10000)
            },10)
        },
        getBoxSize(){
            // 获取容器宽高
            if(!this.paper) return 
            let warp = this.box.getBoundingClientRect()
            this.bw = warp.width 
            this.bh = warp.height 
            this.paper.width = this.bw 
            this.paper.height = this.bh 

            // 圆心
            this.centerX = this.center[0]*this.bw
            this.centerY = this.center[1]*this.bh 

            // 半径参照
            if( this.bw <= this.bh ) this.rLen = this.bw/2
            else this.rLen = this.bh/2

            // 宽度
            this.lineW = Math.abs(this.radius[1]-this.radius[0])

        },
        drawAnimate(){
            let self = this 
            let i = 0
            if(this.percent<=100) this.drawCommonView(this.percent*100)
            else this.drawCommonView(10000)
        },
        drawCommonView(i){
            this.drawCenterCircle()
            this.drawCircleRing()
            this.drawOutLine()
            this.drawPercentCircle(i)
            this.drawPercentText(i)
        },
        drawCenterCircle(){
            // 中心圆
            this.ctx.beginPath()
            let r = this.rLen*this.radius[0]
            this.ctx.arc(this.centerX, this.centerY, r, 0, 2*Math.PI, false)
            this.ctx.fillStyle = this.centerColor
            this.ctx.fill()
            this.ctx.closePath()
        },
        drawCircleRing(){
            // 进度条圆环
            this.ctx.beginPath()
            let r = this.rLen*this.radius[0]
            this.ctx.lineWidth = this.rLen*this.lineW
            this.ctx.arc(this.centerX, this.centerY, r, 0, 2*Math.PI, false)
            this.ctx.strokeStyle = this.ringColor
            this.ctx.stroke()
            this.ctx.closePath()
        },
        drawOutLine(){
            // 最外圆环的一条线
            this.ctx.beginPath()
            let r = Math.round(this.rLen*this.radius[0])+Math.round(this.rLen*this.lineW)-3
            this.ctx.lineWidth = 2
            this.ctx.arc(this.centerX, this.centerY, r, 0, 2*Math.PI, false)
            this.ctx.strokeStyle = this.perColor
            this.ctx.stroke()
            this.ctx.closePath()
        },
        drawPercentCircle(currentPercent){
            // 进度条
            this.ctx.beginPath()
            let r = this.rLen*this.radius[0]
            this.ctx.lineWidth = this.rLen*this.lineW
            // 圆的左顶点 -- 起始点
            let endRadius = (currentPercent/10000*2-1)*Math.PI 
            this.ctx.arc(this.centerX, this.centerY, r, -1*Math.PI, endRadius, false)
            this.ctx.strokeStyle = this.perColor
            this.ctx.stroke()
            this.ctx.closePath()
        },
        drawPercentText(currentPercent){
            this.ctx.beginPath();

            this.ctx.font = " " + Math.floor(this.rLen*0.32) + "px 微软雅黑";

            this.ctx.fillStyle = this.textColor

            let text = ''
            
            text = Number(currentPercent/100).toFixed(2) + '%'
            console.log( text )
            let width = this.ctx.measureText(text).width;

            this.ctx.fillText(text, Math.floor(this.centerX-width/2), this.centerY+this.rLen*0.1)

            this.ctx.closePath()
        }
    }
}
</script>
<style lang="scss" scoped>
.Circle_Chart_Box{
    width: 100%;
    height: 100%;
}
</style>